<template>
	<div class="login-page-wrap">
		<div class="login-page-header-wrap">
			<i class="icon-back" @click="back"></i>
			<div class="login-page-header">忘记密码</div>
		</div>
		<div class="login-body-wrap">
			<div class="login-page-item-wrap">
				<div class="login-page-item border-1px fix">
					<i class="login-icon icon-phone"></i>
					<input type="tel" novalidate="novalidate" pattern="[0-9]*" placeholder="手机号" class="login-input" v-model="forget.phone" maxlength="11">
				</div>
				<div class="login-page-item border-1px fix" style="position: relative;">
					<i class="login-icon icon-code"></i>
					<input type="tel" novalidate="novalidate" pattern="[0-9]*" placeholder="验证码" class="login-input" v-model="forget.code" style="width:10rem;">
					<span class="get-code-span" v-if="!hasSend" @click="sendMessage">获取验证码</span>
					<span class="get-code-disabled" v-else>{{sendTipsMessage}}</span>
				</div>
				<div class="login-page-item border-1px fix flex">
					<i class="login-icon icon-password"></i>
					<input :type="pwdType" placeholder="密码" class="login-input" v-model="forget.password" style="flex:1">
					<i class="login-icon" :class="[this.pwdType === 'text'? 'icon-password-see':'icon-password-nosee']" @click="showPwd"></i>
				</div>
				<div class="login-page-item border-1px fix flex">
					<i class="login-icon icon-password"></i>
					<input :type="confirmPwdType" placeholder="确认密码" class="login-input" v-model="forget.password_confirmation" style="flex:1">
					<i class="login-icon" :class="[this.confirmPwdType === 'text'? 'icon-password-see':'icon-password-nosee']" @click="showConfirmPwd"></i>
				</div>
				<div class="login-page-item">
					<!-- <div class="error-msg" v-show="errorMsg" >{{errorMsg}}</div> -->
					<div id="captcha"></div>
				</div>
			</div>
			<div class="login-btn-wrap">
				<div class="login-btn" @click="resetPassword">完成</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {sendMsg,resetPassword} from '@/api/login'
	import mixin from '@/mixins/removeLoading'
	import md5 from 'js-md5'
	export default{
		name:'forgetforgetPassword',
		metaInfo: {
		  title: '1234tv忘记密码',
			meta: [{
		    name: 'keywords',
		    content: '1234tv.com、1234tv财经直播、财经直播平台、财经视频、财经直播系统、财经直播间、财经直播视频、财经直播教程'
		  },{
				name: 'description',
				content: '专注互联网财经视频直播服务，致力为金融行业从业者、投资者、财经院校师生提供专业、综合性互联网财经直播服务平台。'
			}],
		},
		mixins: [mixin],
		data(){
			return{
				forget:{
					phone:'',
					code:'',
					password:'',
					password_confirmation:'',
					NECaptchaValidate:''
				},
				pwdType:'password',
				confirmPwdType:'password',
				errorMsg:'',
				sendTipsMessage:'获取验证码',
				sendSecond:0,
				hasSend:false
			}
		},
		creatd(){
			this.captchaIns = null
		},
		methods:{
			back(){
				this.$router.go(-1)
			},
			showPwd(){
				if(this.pwdType === 'password'){
					this.pwdType = 'text'
				}else{
					this.pwdType = 'password'
				}
			},
			showConfirmPwd(){
				if(this.confirmPwdType === 'password'){
					this.confirmPwdType = 'text'
				}else{
					this.confirmPwdType = 'password'
				}
			},
			sendMessage(){
				if(this.forget.phone){
					if(!/^1\d{10}$/.test(this.forget.phone)){
						this.errorMsg = '请填写正确的手机号'
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}else{
					this.errorMsg = '请输入手机号!'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					})
					return false
				}
				if(this.sendSecond === 0){
					if(this.captchaIns){
						this.captchaIns.verify()
					}
				}else{
					return false
				}
			},
			resetPassword(){
				if(this.forget.phone){
					if(!/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/.test(this.forget.phone)){
						this.errorMsg = '请填写正确的手机号'
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}else{
					this.errorMsg = '请输入手机号!'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					})
					return false
				}
				if(!this.forget.code){
					this.errorMsg = '请输入短信验证码!'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					})
					return false
				}
				if(this.forget.password){
					if(this.forget.password.match(/([\u4e00-\u9fa5]|\s)/)){
						this.errorMsg = '密码不可以包含中文和空格'
					}else if(this.forget.password.length<6){
						this.errorMsg = '密码长度至少6位'
					}else if(this.forget.password.length>20){
						this.errorMsg = '密码长度不能超过20位'
					}else if(this.forget.password_confirmation){
						if(this.forget.password_confirmation !== this.forget.password){
							this.errorMsg = '确认密码和密码不一致'
						}else{
							this.errorMsg = ''
						}
					}else{
						this.errorMsg = ''
					}
					if(this.errorMsg){
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}else{
					this.errorMsg = '请输入密码'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false
				}
				if(this.forget.password_confirmation){
					if(this.forget.password_confirmation.match(/([\u4e00-\u9fa5]|\s)/)){
						this.errorMsg = '确认密码不可以包含中文和空格'
					}else if(this.forget.password_confirmation.length<6){
						this.errorMsg = '确认密码长度至少6位'
					}else if(this.forget.password_confirmation.length>20){
						this.errorMsg = '确认密码长度不能超过20位'
					}else if(this.forget.password){
						if(this.forget.password !== this.forget.password_confirmation){
							this.errorMsg = '确认密码和密码不一致'
						}else{
							this.errorMsg = ''
						}
					}else{
						this.errorMsg = ''
					}
					if(this.errorMsg){
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}else{
					this.errorMsg = '请输入确认密码'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false
				}
				let loadingIndex = this.$layer.open({type: 2});
				let newForget = {...this.forget,password:md5(this.forget.password + process.env.VUE_APP_SALT),password_confirmation:md5(this.forget.password_confirmation + process.env.VUE_APP_SALT),v:2}
				resetPassword(newForget).then(res=>{
					if(res.code === 0){
						this.$layer.close(loadingIndex)
						let index = this.$layer.msg(res.message)
						setTimeout(()=>{
							this.$layer.close(index)
							this.$router.push('/login')
						},1000)
					}
				}).catch(err=>{
					this.$layer.close(loadingIndex)
					if(err.data && err.data.message && Array.isArray(err.data.message)){
						this.$layer.open({
							content: err.data.message[0]
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
					}
					console.log(err)
				})
			}
		},
		mounted(){
			let that = this;
			initNECaptcha({
					element: '#captcha',
					captchaId: 'b280b14b93ba4e2c9cf3d25a922cd0ab',
					mode: 'bind',
					onVerify: (err,res)=>{
						if(!err){
							this.forget.NECaptchaValidate = res.validate
							let loadingIndex = this.$layer.open({type: 2})
							sendMsg({phone:this.forget.phone,NECaptchaValidate:this.forget.NECaptchaValidate,phone_exist:1}).then(res=>{
								this.$layer.close(loadingIndex)
								if(res.code === 0){
									this.hasSend = true
									this.$layer.msg(res.message)
									this.sendTipsMessage = '60S'
									let timer = setInterval(()=>{
										this.sendSecond++
										this.sendTipsMessage = (60-this.sendSecond)+'S'
										if(this.sendSecond === 60){
											this.hasSend = false
											this.captchaIns.refresh()
											clearInterval(timer)
											this.sendSecond = 0
											timer = null
										}
									},1000)
								}
							}).catch(err=>{
								this.$layer.close(loadingIndex)
								console.log(err)
								this.captchaIns.refresh()
							})
						}
					}
			}, function (instance) {
					// 初始化成功后得到验证实例instance，可以调用实例的方法
					that.captchaIns = instance
			}, function (err) {
					// 初始化失败后触发该函数，err对象描述当前错误信息
			})
		}
	}
</script>

<style>
</style>
